<template>
    <el-table-column v-if="data.children && data.children.length" :label="data.label" :class-name="data.className" >
        <TableColumn v-for="item in data.children" :data="item" />
    </el-table-column> 
    <el-table-column v-else-if="data.hasSelection" type="selection" width="50" :class-name="data.className" />
    <el-table-column v-else-if="data.hasIndex" :label="data.label"  type="index" width="60" :class-name="data.className" />
    <!-- 有插槽则调用插槽的渲染方法 -->
    <el-table-column
        v-else-if="data.hasTpl"
        :label="data.label"
        :min-width="data.width"
        :class-name="data.className"
    >
        <template #default="scope">
            <component :is="data.render(scope.row, scope.$index, scope).com" />
        </template>
    </el-table-column>
    <!-- 默认直接从col取属性 -->
    <el-table-column v-else-if="data.prop" :prop="data.prop" :label="data.label" :min-width="data.width" :class-name="data.className"></el-table-column>
</template>

<script setup>
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    import FlexDatePicker from '@/components/FlexDatePicker.vue';
    const props = defineProps({
        data:{ type:Object }
    })
</script>